<template>
  <div class="a">
    我是cp1
    <div>props a: {{ props.a }}</div>
    <div>props b: {{ props.b }}</div>
    <button @click="handleClick">我是cp1里面的按钮</button>
  </div>
</template>

<script setup>
// 对于有一些变量名是不需要名就直接使用的 我们可以通过下面的备注的形式来告诉eslint不需要检测
/* global
    defineProps
    defineEmits
*/
// 在一些相对旧一点的vue3的项目当中 defineProps 还是需要导入的
// 在最新的版本当中 defineProps  是自动注入的

// 在script setup当中我们使用defineProps来构建要接收的自定义属性
// defineProps(这里的值就是 props的配置项的内容)

// eslint-disable-next-line
const props = defineProps(['a', 'b']);

// 我们使用defineEmits来指定组件接受的自定义事件
// defineEmits([这里声明的所有的可以支持的自定义事件名称])
const emit = defineEmits(['abc']);
const handleClick = () => {
  emit('abc', 555);
};
</script>

<!-- 设置了 scoped这里的样式仅在当前组件内有效 -->
<style scoped></style>
